<template>
  <!-- 稍微手写一个面包屑 -->
  <div class="crumb">
    <div class="curmbList"  v-for="(item,index) in showMenuList" :key="index" :class="item.actived?'active':''">
      <div class="list">
        <div style="width: 100px;"  @click="handlerMenu(item)">{{ item.menuName }}</div>
        <div class="closeIcon"
            @click="closeTab(item,index)">x</div>
      </div>
    </div>
    <div style="display: flex;position: absolute;left: 600px;">
      <div v-for="(item,index) in menuList" :key="index">
        <button @click="openList(item)"> 打开{{ item.menuName }} </button>
      </div>
    </div>
    
  </div>
</template>
<script setup lang='ts'>
  import { ref } from 'vue';
  import { ElMessage } from 'element-plus'
  import {useRouter} from 'vue-router'
  import menu from '../routePathItem/menu.ts'


  let router = useRouter()
  let emit = defineEmits(['goMenu','closeMenu'])

  let menuList:any = menu.menuList
  let showMenuList = ref<any>([])
  clearMenuList()
  function clearMenuList(){
    if(showMenuList.value.length){
      showMenuList.value.forEach((item:any)=>{
        item.actived = false
        item.sKey = `${item.topAppCode}-${item.menuName}`
      })
    }
  }
  function handlerMenu(item:any){
    clearMenuList()
    item.actived = true
    router.push(`/${item.topAppCode}${item.path}`)
    emit('goMenu',item)
  }
  function closeTab(item:any,index:number){
    // 如果是关闭的打开的页面,就需要跳转到前一个或者后一个(关闭的第一个)
    // 关闭的具体逻辑自行处理，不想再多写了，这里只写自动跳转到前一个
    if(item.actived){
      let beforeMenuItem = showMenuList.value[index-1]
      beforeMenuItem.actived = true
      router.push(`/${beforeMenuItem.topAppCode}${beforeMenuItem.path}`)
      showMenuList.value.splice(index,1)
      emit('closeMenu',item,beforeMenuItem)
    }else{
      showMenuList.value.splice(index,1)
      emit('closeMenu',item)
    }
    
    
  }

  function openList(item:any){
    if(showMenuList.value.indexOf(item) == -1){
      showMenuList.value.push(item)
      handlerMenu(item)
    }else{
      ElMessage({
        message: '已经打开过该页面了',
        type: 'warning',
      })
    }
  }


  defineExpose({
    showMenuList
  })
</script>
 
<style scoped>
  .crumb{
    display: flex;
    align-items: center;
    height: 40px;
    background-color: rgb(255, 255, 215);

  }
  .crumb .curmbList{
    margin-right: 10px;
    border: 1px solid #c7c7c7;
    height: 40px;
    cursor: pointer;
    line-height: 40px;
    position: relative
  }
  .list{
    display: flex;
    align-items: center;
  }
  .active{
    background-color: rgb(208, 208, 255);
  }
  .closeIcon{
    width: 20px;
    background: #000;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
  }
</style>